<template>
  <div class="jiayou-pagination-box">
    <el-pagination
      v-if="pageConfig.total"
      layout="total, prev, pager, next"
      :current-page="pageConfig.currentPage"
      :page-size="pageConfig.pageSize"
      :total="pageConfig.total"
      :page-sizes="[15, 30, 45]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
  export default {
    emits: [
      'change',
      // ,'update:pageConfig'
    ],
    props: {
      pageConfig: {
        type: Object,
        default() {
          return {
            total: 0,
            currentPage: 1,
            pageSize: 10,
          };
        },
      },
    },
    data() {
      return {};
    },
    methods: {
      handleCurrentChange(val) {
        console.log('handleCurrentChange', val);
        // this.$emit('update:pageConfig',{...this.pageConfig,currentPage:val})
        this.pageConfig.currentPage = val;
        this.$emit('change');
      },
      handleSizeChange(val) {
        // this.$emit('update:pageConfig',{...this.pageConfig,pageSize:val})
        this.pageConfig.pageSize = val;
        this.$emit('change');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .jiayou-pagination-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 13px;
  }
  /* .el-pagination {
  :deep(.btn-prev),
  :deep(.btn-next) ,
  :deep(.el-pager) li {
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #DCDFE6;
    font-size: 12px;
    color: #616664;
    margin-right: 10px;
  }
  :deep(.el-pagination__total) {
    height: 24px;
    line-height: 24px;
    padding: 0 2px;
  }
  :deep(.el-pagination__sizes),
  :deep(.el-pagination__jump) {
    height: 24px;
    line-height: 24px;
    .el-input__inner {
      height: 24px;
      line-height: 24px;
    }
  }
  :deep(.el-pagination__jump) {
    margin: 0;
  }
  :deep(.el-pager) {
    li:not(.disabled).active {
      border: none;
    }
  }
} */
</style>
